<template>
  <view class="container">
    <view v-if="!isLoggedIn" class="w100">
      <!-- 登录页面 -->
      <wd-card title="">
        <view class="one-click-login">
          <view>
            <wd-img :width="160" :height="150" src="/static/logo.svg" />
          </view>
          <wd-button
            class="login-btn"
            type="success"
            open-type="getPhoneNumber"
            @getphonenumber="handleLogin"
          >
            手机号一键登录
          </wd-button>
        </view>
      </wd-card>
    </view>
    <view v-else>
      <!-- 个人中心页面 -->
      <view class="content">
        <!-- 头像 -->
        <view class="topBox">
          <wd-img :round="true" :width="80" :height="80" src="/static/images/avatar.svg" />
          <view class="userName">
            <view class="name">{{userInfo.nickname}}</view>
            <view class="desc">欲穷千里目, 更上一层楼</view>
          </view>
        </view>
        <!-- 内容 -->
        <view class="listBox">
          <wd-cell-group>
            <wd-cell title="职位信息" icon="usergroup" :value="userInfo.usergroup" />
            <wd-cell title="手机号" icon="phone" :value="userInfo.phoneNum" />
          </wd-cell-group>
          <!-- 退出 -->
          <wd-button type="error" @click="logout">退出登录</wd-button>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { wxLogin } from '@/service/index/user'
import { useToast } from 'wot-design-uni/components/wd-toast'
import { useUserStore } from '@/store'

const isLoggedIn = ref(true) // 控制页面显示的状态
const {setUserInfo, userInfo } = useUserStore()
const toast = useToast()
const handleLogin = async (e) => {
  wxLogin(e.code).then((rsp) => {
    if(rsp.IsSuccess) {
      isLoggedIn.value = true // 切换到个人中心页面
      setUserInfo({
      nickname: 'test',
      token: rsp.Data
    })
    } else {
      toast.error(rsp.ErrorMsg)
    }
  })
  return
}
watch(
  () => userInfo, // 动态访问 props 的字段
  (newValue, oldValue) => {
    if(!userInfo.token) isLoggedIn.value = false;
  },
  { deep: true }
);

const logout = () => {
  isLoggedIn.value = false;
  setUserInfo({
    nickname: '',
  token: '',
  phoneNum: '',
  usergroup: '',
  })
  // uni.showToast({ title: "已退出登录", icon: "none" });
}
</script>
<style scoped>
.content {
  box-sizing: border-box;
  position: relative;
  /* height: 100vh; */
  background-color: #00bcd4;
}

.topBox {
  height: 350rpx;
  padding: 50rpx;
  box-sizing: border-box;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.topBox img {
  width: 130rpx;
  height: 130rpx;
  border-radius: 50%;
  border: 3rpx solid #fff;
  margin-right: 30rpx;
}

.topBox .name {
  font-size: 42rpx;
  color: #fff;
  font-weight: 700;
  margin-bottom: 23rpx;
}

.topBox .desc {
  font-size: 28rpx;
  color: #ececec;
  margin-bottom: 10rpx;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: center;
}

.listBox {
  /* height: calc(100vh - 350rpx); */
  height: 700rpx;
  background-color: #ffffff;
  border-top-left-radius: 30rpx;
  border-top-right-radius: 30rpx;
  margin-top: -20rpx;
  padding: 30rpx 20rpx;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.one-click-login {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.login-btn {
  margin-top: 12rpx;
}
.userName {
  margin-left: 12rpx;
}
</style>
